import { View } from "@tarojs/components";
import { FC, useEffect } from "react";
import styles from "./index.module.less";
import Signature from "./components/signature";
import Job from "./components/job";
import TargetCondition from "./components/target-condition";
import Character from "./components/character";
import DrawerPanel from "./components/drawer-panel";
import Photo from "./components/photo";
import useData from "./useData";

const Section: FC = () => {
  const {
    list,
    form,
    drawerVisible,
    userInfo,
    params,
    activeLabels,
    isMultipe,
    setDrawerVisible,
    onShowDrawerPanel,
    updateUserInfo,
    onSelectedLabelItem,
  } = useData();
  return (
    <View className={styles["section-wrapper"]}>
      {params.type === "signature" && (
        <Signature
          form={form}
          userInfo={userInfo}
          onSave={(data) => updateUserInfo(data)}
          onShowDrawerPanel={onShowDrawerPanel}
        />
      )}
      {params.type === "job" && (
        <Job
          form={form}
          userInfo={userInfo}
          onSave={(data) => updateUserInfo(data)}
          onShowDrawerPanel={onShowDrawerPanel}
        />
      )}
      {params.type === "condition" && (
        <TargetCondition
          form={form}
          userInfo={userInfo}
          onSave={(data) => updateUserInfo(data)}
          onShowDrawerPanel={onShowDrawerPanel}
        />
      )}
      {params.type === "character" && (
        <Character
          form={form}
          userInfo={userInfo}
          onSave={(data) => updateUserInfo(data)}
          onShowDrawerPanel={onShowDrawerPanel}
        />
      )}
      {params.type === "photo" && (
        <Photo
          form={form}
          userInfo={userInfo}
          onSave={(data) => updateUserInfo(data)}
        />
      )}
      {drawerVisible && (
        <DrawerPanel
          value={activeLabels}
          drawerVisible={drawerVisible}
          list={list}
          multiple={isMultipe}
          setDrawerVisible={setDrawerVisible}
          onSelectedLabelItem={onSelectedLabelItem}
        ></DrawerPanel>
      )}
    </View>
  );
};

export default Section;
